<template>
	<view class="booking_seat">
		<view id="selBtn">
			<!-- <button @click="changeTip" data-select="1" :class="areaId=='1'?'active':''">单人-明区</button>
			<button @click="changeTip" data-select="2" :class="areaId=='2'?'active':''">单人-暗区</button>
			<button @click="changeTip" data-select="3" :class="areaId=='3'?'active':''">双人-靠窗</button>
			<button @click="changeTip" data-select="4" :class="areaId=='4'?'active':''">双人-室内</button> -->
			<button v-for="(item,index) in areaData" :key="index" @click="changeTip(item)"  
				:class="areaId==item.id?'active':''">
				{{item.name}}
			</button>
		</view>
		<!-- 日期 -->
		<view class="weekDay">
			<scroll-view class="scroll-view" scroll-x="{{true}}">
				<text v-for="(item,index) in weekData" :key="index" @click="changeWeek(item.id,item.weekDay)"
					:class="[item.id == weekItemId?'text-active':'']">
					{{item.weekDay}}
				</text>
			</scroll-view>
		</view>
		<!--  -->
		<view class="select-state">
			<view class="select-state-box">
				<button class="select-state-Btn1">&nbsp;</button>
				<text>已满</text>
			</view>
			<view class="select-state-box">
				<button class="select-state-Btn2">&nbsp;</button>
				<text>空闲</text>
			</view>
			<view class="select-state-box">
				<button class="select-state-Btn3">&nbsp;</button>
				<text>已选</text>
			</view>
		</view>

		<!-- 座位 -->
		<view class="seat-box">
			<scroll-view class="scroll-view" scroll-x="{{true}}">
				<view v-for="(item,index) in desk_rows" :key="index" @click="changeDay(item.seatId,item)">
					<text>{{item.sname}}</text>

					<view v-for="(item2,index2) in item.orderSeats" :key="index2"
						@click="changeSeat(item2.osid,item2.state,item2)" 
						:class="[item2.state==1?'':item2.state == 3?'select-desk':'free-desk']">
						<text>{{item2.orderTime}}</text>
					</view>
				</view>

			</scroll-view>
		</view>
		<!-- 预约按钮 -->
		<view class="booking-button">
			<button @click="sureBooking">立即预约</button>
		</view>
	</view>
</template>

<script>
	import http from '../../utils/http';
	import store from '../../store/index.js'
	export default {
		data() {
			return {
				selectTip: '',
				// 区域id
				areaId: "1",
				areaName:'',
				areaPrice:'',
				// 星期id
				weekItemId: '1',
				weekItemDay: '',

				// 桌号
				deskNum: '',
				deskName:'',
				// 座位号
				deskNumId: '',
				deskState: "",
				// 座位数组
				seatIds:[],
				// 区域数据
				areaData:[],
				// 座位全部信息
				seatItem:[],
				onAreaData:[],
				weekData: [{
						id: 1,
						weekDay: "周一（05.08）"
					},
					{
						id: 2,
						weekDay: "周二（05.09）"
					},
					{
						id: 3,
						weekDay: "周三（05.10）"
					},
					{
						id: 4,
						weekDay: "周四（05.11）"
					},
					{
						id: 5,
						weekDay: "周五（05.12）"
					},
					{
						id: 6,
						weekDay: "周六（05.13）"
					},
					{
						id: 7,
						weekDay: "周日（05.14）"
					}
				],
				desk_rows: [],

			};
		},
		methods: {
			// 区域
			changeTip: function(v) {
				this.areaId = v.id
				this.areaName = v.name
				this.areaPrice = v.price
				this.onAreaData = v
				this.getDeskData()
			},
			// 星期
			changeWeek: function(weekId, weekDay) {
				this.weekItemId = weekId
				this.weekItemDay = weekDay
				// console.log(this.weekItemDay)
			},
			// 桌号
			changeDay: function(dayId,item) {
				// 桌号
				this.deskNum = dayId
				this.deskName = item.sname
				// console.log("桌名：", this.deskName)
				// console.log("桌名Id", this.deskNum)
			},
			// 获取座位数据
			getDeskData() {
				http({
					url: '/orderseat/queryall',
					method: 'post',
					data: {
						areaId: this.areaId
					}
				}).then((res) => {
					this.desk_rows = res.data
					console.log(res.data)
				})
			},
			// 座位
			changeSeat: function(deskId, deskStateId,item) {
				// 座位号
				this.deskNumId = deskId
				this.deskState = deskStateId
				this.seatItem = item
				
				// console.log("座位号id：", item)
				if (item.state == 1) {
					uni.showModal({
						title: '座位信息确认',
						content: '该座位已被其它同学预定，无法继续预定，请选择其它座位。',
						success: function(res) {
							if (res.confirm) {
								
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					if (item.state == 2) {
						item.state = 3
						this.seatIds.push(item.osid)
						// console.log('添加',this.seatIds)
					} else {
						item.state = 2
						for(let i=0;i<this.seatIds.length;i++){
							if(item.osid == this.seatIds[i]){
								this.seatIds.splice(i,1)
								// console.log('删除',this.seatIds)
							}
						}
					}
				}
			},
			// 提交预约
			sureBooking: function() {
			let onArea_Data = this.onAreaData;
			let onSeat_Data = this.seatIds
			let onDeskName = this.deskName
			let onDeskNameId = this.deskNum
			let onWeekName = this.weekItemDay
			let onSeatItem = this.seatItem
				uni.showModal({
					title: '信息确认',
					content: '选择区域：' + this.areaName+ '\n' + '预定日期：' + this.weekItemDay + '\n'+'位置信息：' + this.deskName+ ' '+JSON.stringify(this.seatIds) + '号位',
					success: function(res) {
						if (res.confirm) {
							uni.setStorage({
								key: 'areaData',
								data: {
									onArea_Data,
									onSeat_Data,
									onDeskNameId,
									onDeskName,
									onWeekName,
									onSeatItem
								},
								fail: function () {
									console.log('setStorage-fail');
								}
							});
							wx.navigateTo({
								url: "../Booking_orders_submit/Booking_orders_submit"
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 区域信息
			getAreaData:function(){
				http({
					url: '/area/queryall',
					method: 'get',
				}).then((res)=>{
					this.areaData = res.data
					// console.log(res.data)
				})
			}
		},
		mounted() {
			this.getDeskData()
			this.getAreaData()
		}

	}
</script>



<style scoped lang="less">
	.booking_seat {
		& #selBtn {
			width: 670rpx;
			height: 80rpx;
			// outline: 1px solid red;
			margin: 20rpx 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			& button {
				margin: 0;
				padding: 0;
				width: 180rpx;
				height: 60rpx;
				background: #aaaaaa;
				line-height: 60rpx;
				font-size: 30rpx;
				color: #ffffff;
				border: none;
			}

			& button:nth-child(1) {
				border-top-left-radius: 50rpx;
				border-bottom-left-radius: 50rpx;
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;

			}

			& button:nth-child(2) {
				border-radius: 0;
			}

			& button:nth-child(3) {
				border-radius: 0;
			}

			& button:nth-child(4) {
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
				border-top-right-radius: 50rpx;
				border-bottom-right-radius: 50rpx;
			}

			& .active {
				background: #c6964f;
				color: #ffffff;
			}
		}

		& .weekDay {
			width: 670rpx;
			height: 60rpx;
			margin: 0 40rpx;
			display: flex;
			white-space: nowrap;

			& .scroll-view {
				height: 80rpx;
				display: flex;
				margin: 0 10rpx;
				// outline: 1px solid red;
				line-height: 50rpx;
				justify-content: space-between;
				align-items: center;

				& text {
					display: inline-block;
					width: 180rpx;
					height: 50rpx;
					font-size: 26rpx;
					margin: 0 4rpx;
					line-height: 50rpx;
					background: #ffffff;
					text-align: center;
				}

				& .text-active {
					color: #c6964f;
					border-bottom: 6rpx solid #c6964f;
				}

			}

		}

		& .select-state {
			width: 670rpx;
			height: 60rpx;
			margin: 10rpx 40rpx;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			// outline: 1px solid red;

			& .select-state-box {
				width: 200rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;

				& button {
					width: 40rpx;
					height: 40rpx;
					margin: 0;
					padding: 0;
					border-radius: 10rpx;
					border: none;
				}

				& text {
					line-height: 40rpx;
					margin-left: 8rpx;
				}

				& .select-state-Btn1 {
					background: #aaaaaa;
				}

				& .select-state-Btn2 {
					background: #81d3f8;
				}

				& .select-state-Btn3 {
					background: #d94154;
				}
			}

		}

		& .seat-box {
			// 座位信息
			width: 670rpx;
			height: 80rpx;
			// outline: 1px solid red;
			margin: 0 0rpx 10rpx 40rpx;
			display: flex;
			white-space: nowrap;

			& .scroll-view {
				height: 1040rpx;
				display: flex;
				margin: 0 10rpx;
				line-height: 80rpx;
				text-align: center;

				& view {
					display: inline-block;
					width: 200rpx;
					height: 80rpx;
					color: #aaaaaa;
					font-size: 28rpx;

					& view {
						width: 170rpx;
						height: 80rpx;
						margin: 10rpx 10rpx 40rpx 10rpx;
						border-radius: 10rpx;
						background: #aaaaaa;
						color: #ffffff;
						font-size: 26rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						white-space:normal;
						word-break: break-all;

						& text {

							line-height: 40rpx;
							padding: 0 20rpx;

						}

					}

					// 已选
					& .select-desk {
						background: #d94154;
					}

					// 空闲
					& .free-desk {
						background: #81d3f8;
					}

				}


			}


		}


		// 预约按钮
		& .booking-button {
			width: 670rpx;
			height: 80rpx;
			margin: 0 50rpx;
			box-sizing: border-box;
			// outline: 1px solid red;
			position: relative;
			top: 1000rpx;

			& button {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				line-height: 80rpx;
				background: #c6964f;
				color: #ffffff;
			}
		}
	}
</style>
